<template>
<div>
	<!--头部-->
	<div class="xuan-top">
		<a href="#/Zeidianji"><img class="xuan-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="xuan-pin">绚丽眼妆</span>
		<a><img class="xuan-fan" src="../assets/img/duanhuowang/fan.png" alt=""/></a>
	</div>
	<!--炫丽眼妆大图-->
	<img id="xx" class="xlyz" src="../assets/img/shouye/tuijian/lunbo.png" alt=""/>
	
	
	
	<!--防晒，爽肤水，精华，乳液，面霜等-->
	<div class="xu-jin">
		<nav class="xu-active xu-tong">防晒必备</nav>
		<nav class="xu-line xu-tong">随身面膜</nav>
		<nav class="xu-line xu-tong">分瓶装</nav>
		<nav class="xu-line xu-tong">化妆水<img class="xu-up" src="../assets/img/shouye/lunbo/xiajiantou.png" alt=""/></nav>
	<!--点击精选出现-->
	<div class="xu-fenlei">
		<p class="xu-suoyou">所有商品</p>
		<p class="xu-xiaolei">
		<a class="xu-fenhong">精选</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击面膜出现-->
	<div class="xu-fenlei">
		<p class="xu-suoyou">所有商品</p>
		<p class="xu-xiaolei">
		<a class="xu-fenhong">面膜</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击母婴出现-->
	<div class="xu-fenlei">
		<p class="xu-suoyou">所有商品</p>
		<p class="xu-xiaolei">
		<a class="xu-fenhong">母婴</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击眼妆出现-->
	<div class="xu-fenlei">
		<p class="xu-suoyou">所有商品</p>
		<p class="xu-xiaolei">
		<a class="xu-fenhong">眼妆</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	
	
	
	
	
	</div>
	<!---->
	<div v-for="oo in 5">
	<!--防晒必备-->
	<div class="shaik">
		<!--防晒-->
	<p class="xing">
		<!--<img src="../assets/img/shouye/lunbo/sangang.png"/>-->
		<span>防晒必备</span>
		<!--<img src="../assets/img/shouye/lunbo/sangang.png"/>-->
	</p>
	<!--必备-->
	<div v-for="kk in 2">
	<div class="xdanqu">
		<div class="xtimg">
		<img class="xkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="xtwen">
		<p class="xzi">蜗牛饰容BB霜50g</p>
		<p class="xmongy">￥12.90</p>
		<p class="xqiang">立即购买</p>
		</div>
	</div>
	<!--右边-->
	<div class="xrdanqu">
		<div class="xktimg">
		<img class="xkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="xtwen">
		<p class="xzi">蜗牛饰容BB霜50g</p>
		<p class="xmongy">￥12.90</p>
		<p class="xqiang">立即购买</p>
		</div>
	</div>
 </div>
	</div>
		<!--随身面膜-->
	<div class="shaik">
		<!--防晒-->
	<p class="xing">
		<!--<img src="../assets/img/shouye/lunbo/sangang.png"/>-->
		<span>随身面膜</span>
		<!--<img src="../assets/img/shouye/lunbo/sangang.png"/>-->
	</p>
	<!--必备-->
	<div v-for="kk in 2">
	<div class="xdanqu">
		<div class="xtimg">
		<img class="xkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="xtwen">
		<p class="xzi">蜗牛饰容BB霜50g</p>
		<p class="xmongy">￥12.90</p>
		<p class="xqiang">立即购买</p>
		</div>
	</div>
	<!--右边-->
	<div class="xrdanqu">
		<div class="xktimg">
		<img class="xkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="xtwen">
		<p class="xzi">蜗牛饰容BB霜50g</p>
		<p class="xmongy">￥12.90</p>
		<p class="xqiang">立即购买</p>
		</div>
	</div>
 </div>
	</div>
	</div>
	<!--点击回到顶部-->
		<a href="#xx">
			<div class="x-ding">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="x-fanding">返回顶部</p>
			</div>
		</a>
</div>
</template>

<script>
	export default {
		methods:{
			xucheng:function(){
				$(".xu-xiaolei>a").click(function(){
					$(this).addClass("xu-fenhong").siblings("a").removeClass("xu-fenhong");
				})
			},
			xudao:function(){
			$("nav").attr("xuan",false);
			var index = 0;
			$("nav").click(function(){
				$(this).addClass("xu-active").siblings("nav").removeClass("xu-active");
				$(".xu-fenlei").eq($(this).index()).addClass("xu-fenshow").siblings(".xu-fenlei").removeClass("xu-fenshow");
			
				if ($(this).attr("xuan") == "false") {
					$(".xu-fenlei").eq($(this).index()).slideDown(500).siblings(".xu-fenlei").hide();
					$(this).attr("xuan",true);
				}else if ($(this).attr("xuan") == "true") {
					$(".xu-fenlei").eq($(this).index()).slideUp(500);
					$(this).attr("xuan",false);
				}
			})
		},
		},
		mounted:function(){
			this.xucheng();
			this.xudao();
		}
	}
</script>

<style>
	/*头部*/
	.xuan-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index:100;
	}
	
	.xuan-pin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 22rem;
		font-weight: 200;
	}
	
	.xuan-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.xuan-fan {
		width: 3.6rem;
		height: 3.4rem;
	}
	/*炫丽眼妆大图*/
	.xlyz {
		width: 100%;
		height: 30rem;
		margin-top: 9.6rem;
	}
	/*护肤品*/
	.x-liebiao{
		width: 100%;
		height: 6rem;
		background: #FFFFFF;
		margin-top:1rem;
		font-size:3rem;
		box-sizing: border-box;
		line-height: 6rem;
		color:#4D4D4D;
		display: flex;
		justify-content: space-around;
	}
	.x-xia{
		width: 2.4rem;
		height: 1.4rem;
	}
	.x-kong{
		width: 0.1rem;
		height: 2.9rem;
		background: #4D4D4D;
	}
	.x-sactive{
		color:red;
		border-bottom: 0.3rem solid red;
	}
	/*防晒必备*/
	.xing{
		width: 100%;	
		height: 8rem;
		line-height: 8rem;
		font-size: 3rem;
		text-align: center;
		color:#4D4D4D;
	}
	/*单个曲奇🍪*/
	.xdanqu{
		width: 33rem;
		height: 44rem;
		background: #FFFFFF;
		margin:0 2rem;
		text-align: center;
		float:left;
	}
	.xtimg,.xktimg{
		width: 100%;
		height: 26.3rem;
		border-bottom: 0.1rem solid #A9A9A9;
	}
	.xkitty{
		width: 6.4rem;
		height: 17.2rem;
		margin:4.6rem 0;
	}
	.xtwen{
		width: 100%;
		height: 17.6rem;
	}
	.xzi{
		width: 30rem;
		font-size: 2.4rem;
		padding: 1.5rem 0 0.5rem 2rem;
		text-align: center;
		color:#4d4d4d;
	}
	.xmongy{
		font-size: 2.4rem;
		color:red;
	}
	.xqiang{
		font-size: 1.8rem;
		width: 21.8rem;
		height: 3rem;
		background: red;
		border-radius: 1.5rem;
		line-height: 3rem;
		color:white;
		margin:auto;
		margin-top: 1rem;
		font-weight: 200;
	}
	/*右*/
	.xrdanqu{
		width: 33rem;
		height: 44rem;
		background: #FFFFFF;
		text-align: center;
		margin:0 2rem 1rem 0;
		float:left;
	}
		/*返回顶部*/
	.x-ding{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.x-ding>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.x-fanding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
	/*精选导航*/
	.xu-jin{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 6rem;
		font-size: 3rem;
		background: #FFFFFF;
		line-height: 6rem;
		margin-top: 2rem;
		position: relative;
	}
	.xu-jin>nav{
		color:#4D4D4D;
	}
	.xu-jin .xu-active{
		box-sizing: border-box;
		color:#F8545F;
		/*border-bottom: 0.2rem solid #F8545F;*/
	}
	.xu-up{
		width: 2.4rem;
	}
	/*点击出现所有商品分类*/
	.xu-fenlei{
		width: 100%;
		background: #FFFFFF;
		border-bottom: 0.01rem solid #808080;
		position: absolute;
		top:6.2rem;
		display: none;
	}
	.xu-suoyou{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		font-size: 2.8rem;
		color:#808080;
		padding:1rem 0 0 2rem;
		border-bottom: 0.01rem solid #808080;
	}
	.xu-xiaolei{
		width: 100%;
	}
	.xu-xiaolei>a{
		display: inline-block;
		font-size: 2.8rem;
		padding: 0 1rem;
		color:#4D4D4D;
	}
	.xu-xiaolei .xu-fenhong{
		color:red;
	}
	/*左边框*/
	.xu-line{
		padding-left: 3rem;
		border-left: 0.1rem solid #808080;
	}
	.xu-tong{
		height: 2.8rem;
		line-height: 2.8rem;
	}
</style>